
@extends('admin.common.common')

@section('head')
    <link rel="stylesheet" href="/webuploade/webuploader.css">
@endsection


@section('body')

    <article class="page-container">

        <div id="vue_hello">
            <form class="form form-horizontal" id="form-node-add" action="{{route('admin.fangattr.store')}}"
                  method="post" enctype="multipart/form-data" >
                @csrf
                @if ($errors->any())
                    <div class="Huialert-error Huialert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源属性名称：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="name" placeholder="" >
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源属性字段</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" name="filed_name" placeholder="">
                    </div>
                </div>

                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>：图标</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div id="picker">文件上传

                        </div>
                        <img src="" alt="" hidden id="img" width="150" height="150">
                        <input type="hidden" value="" name="icon" id="pid">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>上级目录：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <select name="pid">
                            <option value="0">==顶级==</option>
                            @foreach($data as $val)
                                <option value="{{$val->id}}">{{$val->html}}{{$val->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    </div>
                </div>
            </form>
        </div>

    </article>
@endsection


@section('js')
    <script src="/webuploade/webuploader.js"></script>
    <script src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script  src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script src="/admin/static/vue3.0.js"></script>

    <script>

        //webloader文件同步上传
        var uploader = WebUploader.create({
            //是否自动上传
            auto:true,
            //swf文件路径
            swf:'/webuploade/yploader.swf',
            //文件提交方式
            method:"post",

            //携带参数
            formData:{
              _token: "{{csrf_token()}}"
            },
            //提交地址
            server:"{{route('admin.fangattr.ossfile')}}",
            //选择文件的按钮
            pick:'#picker',
            //不压缩文件
            resize:false

        });

        uploader.on('uploadSuccess',function (res,pid) {

            // console.log(JSON.parse(pid._raw).data);
            $('#img').show().attr('src',pid.data.icon)
            $('#pid').val(pid.data.icon)

        })
    </script>

@endsection
